<!-- 移动邮件 -->
<template>
  <OneDialog v-show="true">
    <template #titles>
        <span>移动邮件到【{{folderName}}】</span>
        <span class="m-x-5px">-</span>
        <span class="ml-10px">{{currentTime}}</span>
        <i class="iconfont icon-close hand" @click="closeDialog" />
    </template>
    <template #content>
      <div class="tree-wrap">
        <MoveEmailFolder @handleMove="handleMove" />
      </div>
    </template>
  </OneDialog>
</template>
<script lang="ts" setup>
import { ref, defineAsyncComponent, onMounted } from 'vue';
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
import { ElMessage, ElLoading } from 'element-plus';
import api from '/@/api/email/index';

import { useEmail } from '/@/stores/email';
import pinia from '/@/stores/index';

const MoveEmailFolder = defineAsyncComponent(() => import('/@/components/moveEmailFolder/index.vue'));
const OneDialog = defineAsyncComponent(() => import('/@/components/Common/OneDialog.vue'));

// 定义父组件传过来的值
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: () => false,
  },
  messageId: {
		type: String,
		default: () => '',
	},
});

const emit = defineEmits(['update', 'closeDialog', 'moveSuccess']);

const currentTime = ref("");
const folderName = ref<any>();

const stores = useEmail(pinia);
const { curFolder } = storeToRefs(stores);

const handleMove = (params:any) => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })

  params.messageId = props.messageId;
  api.email.moveItem(params).then(() => {
    ElMessage({ type: 'success', message: '操作成功' });
    emit('moveSuccess')
    loading.close()
  })
}

const closeDialog = () => {
  emit('closeDialog');
}

const formatCurrenTime = () => {
  currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
}

setInterval(formatCurrenTime, 1000);

// 页面加载时
onMounted(() => {
  if(curFolder.value == 'INBOX') {
    folderName.value = '收件箱';
  } else {
    folderName.value = curFolder.value;
  }
});
</script>
<style lang="scss" scoped>
.tree-wrap {
  padding: 12px 13px 8px 4px;
  background-color: #e3e8ed;
  border-top: 1px solid #929aa2;
  height: 100%;
  overflow-y: scroll;

  :deep(.el-form-item) {
    margin-bottom: 0;
  }

  :deep(.el-form-item + .el-form-item) {
    margin-top: 8px;
  }

  :deep(.el-input__wrapper) {
    border-radius: 0;
    box-shadow: 0 0 0 1px #afafaf inset;
  }
  :deep(.el-select__wrapper) {
    border-radius: 0;
    box-shadow: 0 0 0 1px #afafaf inset;
    height: 26px;
    line-height: 26px;
    padding: 1px 15px;
  }

  :deep(.el-input__inner) {
    height: 26px;
    line-height: 26px;
  }
}

:deep(aie-footer) {
  display: none;
}

.hand {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 20px;
}
</style>
